<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>TrackingInfo</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
		  $(function(){
		    var myLatlng = new google.maps.LatLng(${trackRequest.latitude}, ${trackRequest.longitude});
		    var myOptions = {
		      zoom: 13,
		      center: myLatlng,
		      mapTypeId: google.maps.MapTypeId.ROADMAP
		    }
		    var map = new google.maps.Map(document.getElementById("mapa"), myOptions);
		    <c:forEach items="${trackingInfoList}" var="ti">
		    new google.maps.Marker({
		    	position: new google.maps.LatLng(${ti.latitude}, ${ti.longitude}),
		    	map: map,
		    	title: "${ti.userId}"
		    });
		    </c:forEach>
		  });
		</script>
		<style type="text/css">
			#mapa{
				width: 800px;
				height: 450px;
			}
		</style>
	</head>
	<body>
		<h1>TrackingInfo</h1>
		<table border="1">
			<tr>
				<th>UserId</th>
				<th>Accuracy</th>
				<th>Longitude</th>
				<th>Latitude</th>
				<th>Date</th>
			</tr>
			<c:if test="${!empty trackingInfoList}">
				<c:forEach var="ti" items="${trackingInfoList}">
					<tr>
						<td>${ti.userId}</td>
						<td>${ti.accuracy}</td>
						<td>${ti.latitude}</td>
						<td>${ti.longitude}</td>
						<td>${ti.dateUpdate}</td>
					</tr>
				</c:forEach>
			</c:if>
			<c:if test="${empty trackingInfoList}">
				<tr>
					<td colspan="5">Nenhum TrackingInfo cadastrado nas proximidades.</td>
				</tr>
			</c:if>
		</table>
		<div id="mapa" />
	</body>
</html>